<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3777682_4itlkdjvzz4/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 50px;
            background-color: rgb(116, 136, 239);
            color: white;
            display: flex;
            justify-content: space-between;

        }

        header div {
            width: 1500px;
            height: 100%;
            display: flex;
            line-height: 50px;
        }

        header div .icon-liebiao {
            margin-left: 50px;
        }

        header div .wenzi {
            transform: translateX(750px);

        }

        .container {
            display: flex;
        }

        .container ul {
            height: 800px;
            width: 200px;
            background-color: rgb(4, 4, 107);
            line-height: 40px;
            list-style: none;
            color: white;
        }

        .container ul li {
            width: 100%;
            margin-left: 5px;
        }

        .container ul li span {
            margin-left: 50px;
        }

        .container ul .active {
            background-color: rgb(174, 169, 169);
        }

        .container main {
            width: 1200px;
        }

        .container main .shang {
            width: 100%;
            height: 50px;
            background-color: aqua;
            box-sizing: border-box;
        }

        .container main .shang span {
            line-height: 50px;
            font-size: 20px;

        }

        .container main .shang .span1 {
            margin-left: 20px;
        }

        .container main .shang .span2 {
            margin-left: 20px;
        }

        .container main .shang .span3 {
            margin-left: 750px;
        }

        .container main .shang .span4 {
            margin-right: 20px;
        }


        .container main .xia {
            width: 100%;
            height: 100%;
        }

        .container main .xia .xia1 {
            width: 100%;
            height: 100px;
            background-color: white;
            display: flex;
        }

        .container main .xia .xia1 div {
            width: 230px;
            height: 90px;
            background-color: rgb(27, 10, 126);
            color: white;
            position: relative;
        }

        .container main .xia .xia1 div span {
            display: block;
            margin-top: 5px;
        }

        .container main .xia .xia1 div .iconfont {
            position: absolute;
            top: 5px;
            right: 20px;
            font-size: 30px;
        }
        .container main .xia .youxia{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-color: aquamarine;
        }
        .container main .xia .youxia p {
            width: 500px;
            height: 500px;
            background-color: aqua;
            float: left;
            margin-left: 10px;
        }
        .container main .xia .youxia .biaodan{
            width:1000px ;
            height: 500px;
            background-color: azure;
            overflow: hidden;
        }
        .container main .xia .youxia .biaodan table{
            margin: 20px 0;
            width: 100%;
            line-height: 40px;
            text-align: center;
            border-collapse: collapse;
        }
        .zhengchang{
            background-color: red;
        }
        .buzhengchang{
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <header>
        <div>
            <h2>后台管理系统</h2>
            <span class="iconfont icon-liebiao"></span>
            <span class="wenzi"> 当前用户: bootstrap 中文角色: 管理员</span>
        </div>
    </header>
    <section class="container">
        <ul>
            <li class="iconfont icon-fangzi"> 后台首页 <span>></span></li>
            <li class="iconfont icon-liebiao "> 设计元素<span>></span></li>
            <li class="iconfont icon-bianji"> 表单元素<span>></span></li>
            <li class="iconfont icon-diannao"> 示例页面<span>></span></li>
            <li class="iconfont icon-jisuanqi_o ">常用列表<span>></span></li>
            <li class="iconfont icon-kehuishouwu-feizhilei "> 脚本插件<span>></span></li>
            <li class="iconfont icon-shuzhuangtu"> 统计图表<span>></span></li>

        </ul>
        <main>
            <div class="shang">
                <span class="span1">
                    <<< /span>
                        <span class="span2">欢迎首页</span>
                        <span class="span3">>></span>
                        <span class="span4">页签操作</span>

            </div>
            <div class="xia">
                <div class="xia1">
                    <div class="tu1">
                        <span>今日收入</span>
                        <span>10000000</span>
                        <span class="iconfont icon-qiandai"></span>

                    </div>
                    <div class="tu2">
                        <span>今日收入</span>
                        <span>10000000</span>
                        <span class="iconfont icon-qiandai"></span>
                    </div>
                    <div class="tu3">
                        <span>今日收入</span>
                        <span>10000000</span>
                        <span class="iconfont icon-qiandai"></span>
                    </div>
                    <div class="tu4">
                        <span>今日收入</span>
                        <span>10000000</span>
                        <span class="iconfont icon-qiandai"></span>
                    </div>
                </div>              
                <div class="youxia">
                    <p class="zhuzhuangtu"></p>
                    <p class="quxiantu">                    </p>
                    <div class="biaodan">
                        <table>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>订单号</th>
                                    <th>商品名称</th>    
                                    <th>下单日期</th>
                                    <th>状态</th>
                                    <th>处理状况</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                        </table>
                    </div>
                </div>


            </div>

        </main>
    </section>
</body>

</html>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./Mock.js"></script>
<script>
    var son = document.querySelector('.zhuzhuangtu')
    var l = echarts.init(son);
    l.setOption({
        title: {
            text: '每月收入',

        },
        legend: {
            top: 10,
            right:200

        },
        xAxis: { //x轴设置
            data: ["01", '02', '03', '04', '05', '06', '07',"08","09","10","11","12"]
        },
        yAxis: { //y轴设置
            min: 1000,
            mix: 5000,
           
            splitNumber: 8,
            

        },

        series: [
            {
                name: '当前每月收入',

                barWidth: 15,
                backgroundStyle: {
                    color: 'blue',

                },
                type: 'bar',
                data: [2600, 1600, 1800, 3300, 4700, 3500, 1690,2500,2300,1900,3700,1900]

            },
            {
                name: '同期每月收入',
                type: 'bar',
                barWidth: 15,
                backgroundStyle: {
                    color: 'red',
                },
                data: [2100, 1560, 1900, 3000, 4000, 3700, 1900,2000,2800,2300,3650,3600],

            }
        ]
    });
    var con = document.querySelector('.quxiantu');
    var e = echarts.init(con);
    e.setOption({
        title: {
            text: '每年收入走势',
        },

        legend: {
            top: 30,
            right:220

        },
        xAxis: { //x轴设置
            data: [2009, 2010, 2011, 2012, 2013, 2014, 2015,2016,2017,2018,2019,2020]
        },
        yAxis: { //y轴设置
            min:20,
            mix:80,
            splitNumber: 7
        },
        series: [
            {
                name: '每年收入走势',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65,40,68,20,73,60],
                symbolSize: 10, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                    }
                },
            },
            {
                name: '每年同期收入走势',

                type: 'line',
                data: [59, 52, 69, 45, 70, 40, 75,30,28,20,33,50],
                symbolSize: 10, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        borderWidth: 2, //圆点的边框宽度

                    }

                }
            }

        ]
    });
    
    render(data.list)
    function render(data) {
        var str = data.map((item, index) => {
            return `  <tr>
                                   <td>${item.shu}</td>
                                   <td>${item.phone}</td>
                                   <td>${item.isadmin}</td>
                                   <td>2019-05-01</td>
                                   <td>${item.status==true?"<span class='zhengchang'>正常</span>":"<span class='buzhengchang'>不正常</span>"}</td>
                                    
                                   
                                </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str
    }
</script>